<template name="dateTimeSelect" ref="dateTimeSelect">
	<view>
		<view :style="styles" class="bgk" @click="select">点击该区域取消</view>
		<view :style="styles" class="show_box_content">
			<view class="title">选择需要查询的时间</view>
			<ul>
				<li class="custom">
					<view ><span class="left">自定义</span>
						<button class="sureSelect right" @click="sureSelect">确定</button>
						<view class="right times"><picker @change="selectEndDate" :start="startDate"  style="height : 20px;" mode="date">{{endDate}}</picker> </view>
						<view class="right times">-</view>
						<view class="right times"><picker @change="selectStartDate" class="right" style="height: 20px;" mode="date">{{startDate}}</picker></view>
					</view>
				</li>
				<li v-for="(item,index) in dateTimeListData" :key="index" v-on:click="checked(item)">
					<view class="person_info" >
						<span class="left">{{item.title}}</span>
					</view>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectData:{},
				styles:"display:none;",	
				dateTimeListData: [{"title":"三天","cycle":"-3"},{"title":"一周","cycle":"-7"},{"title":"三个月","cycle":"-30"}],
				startDate:"开始时间",
				endDate:"结束时间"
			}
		},
		props:["data"],
		mounted() {
		},
		created() {
			this.selectData=this.dateTimeListData[1];
			this.checked(this.selectData);
		},
		methods: {
			init(){
				//初始化数据，根据当前用户去获取相关的绑定就诊人
			},
			select() {
				 if (this.styles=="") {
					this.styles="display:none;"
				} else {
					this.styles="";
				} 
			},
			sureSelect(){
				
				let item={};
				item.title="自定义";
				item.cycle="0";
				item.startDate=this.startDate;
				item.endDate=this.endDate;
				this.styles = "display:none;";
				this.selectData = item;
				this.$emit("checked",item);
			},
			checked(item) {
				this.styles = "display:none;";
				this.selectData = item;
				
				let date=new Date();
				let endDate=this.dateFormat(date);
				let cycleDate=date.getDate()+parseInt(item.cycle);
				date.setDate(cycleDate);
				let startDate=this.dateFormat(date);
				item.startDate=startDate;
				item.endDate=endDate;
				this.$emit("checked",item)
			},
			selectStartDate(e){
				var date=e.detail.value;
				this.startDate=date;
			},
			selectEndDate(e){
				var date=e.detail.value;
				this.endDate=date;
			},
			dateFormat(date){
				// var date = new Date(),
				var year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate(),
				hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
				minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
				second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-' + day;
				return timer;
			},
		}
	}
</script>

<style>
	.bgk{
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 998;
		background: rgba(0, 0, 0, 0.39);
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
	}
	.show_box_content{
		position: fixed;
		z-index:999; 
		top: 0px;
		background-color: #FFFFFF;
		width: 100%;
		transition: height .1s linear;
		border-radius: 0px 0px 10px 10px;
		font-size: 16px;
	}
	.show_box_content .title{
		margin-top: 10px;
		text-align: center;
		border-bottom: 1px solid #F0F0F0;
		padding-bottom: 20px;
	}
	.show_box_content ul{
		width: 100%;
		margin-top: 10px;
	}
	.show_box_content ul li{
		width: 92%;
		margin: 0 auto;
		border-bottom: 1px solid #F0F0F0;
		padding: 15px;
		display: flow-root;
	}
	.show_box_content ul li:last-child{
		border: none;
	}
	.show_box_content ul .custom{
		padding: 10px!important;
	}
	.show_box_content ul .custom .sureSelect{
		width: 70px;
		height: 30px;
		line-height: 30px;
		border: none;
		color: #FFFFFF;
		background-color: #23C943;
		font-size: 12px;
		margin-top: -4px;
	}
	.show_box_content ul .custom .times{
		margin-right: 12px;
		font-size: 14px!important;
	}
	.show_box_content ul li span{
		font-weight: 600;
	}
</style>
